<template>
  <view class="post-thread">
    <view class="post">
      <up-icon name="grid" color="#ffbb17" size="30"></up-icon>
      <view class="post-right">
        <view class="text-icon">
          <text>发布本帖可获50积分</text>
          <up-icon name="info-circle" color="#999999" size="20"></up-icon>
        </view>
        <text class="text">积分可用于兑换飞豆，参与专属活动</text>
      </view>
    </view>
    <view class="post first">
      <text>草稿箱(0)</text>
      <up-icon name="arrow-right" color="#b2b8cb" size="20"></up-icon>
    </view>
    <view class="upinput">
      <up-input
        size="large"
        :customStyle="{
          height: '40px',
          border: 0,
        }"
        placeholder="请输入帖子标题（不超过30字）"
        v-model="dataInfo.title"
      ></up-input>
      <text>{{ dataInfo?.title?.length || 0 }}/30</text>
    </view>
    <view class="rich-content">
      <!-- <view class="rich-text">
     <text>B</text>
     <text>I</text>
     <text>U</text>
    </view> -->
      <up-textarea
        height="150"
        v-model="textareaValue"
        placeholder="请详细描述您的帖子内容"
      ></up-textarea>
    </view>
    <view class="upload">
      <up-upload
        v-model:fileList="uploadList"
        autoDelete
        autoUpload
        autoUploadApi="https://test.com/api/v1/local/upload"
        autoUploadDriver="local"
        :autoUploadHeader="{
          Authorization: '123456',
        }"
        @afterRead="afterRead"
        getVideoThumb
        name="1"
        multiple
        :previewFullImage="true"
      >
        <template #trigger>
          <view class="upload-icon">
            <up-icon name="plus" color="#1d7cff" size="25px"></up-icon>
            <text>添加图片</text>
          </view>
        </template>
      </up-upload>
    </view>
    <view class="hashtag">
      <view class="label-content">
        <view class="label">
          <view class="icon-tags">
            <up-icon name="tags" color="#666666" size="25px"></up-icon>
          </view>
          <text>话题标签</text>
        </view>
        <up-icon
          :name="status ? 'arrow-up' : 'arrow-down'"
          color="#666666"
          size="25px"
          @click="status = !status"
        ></up-icon>
      </view>
      <view class="label-list" v-if="status">
        <view class="item" v-for="(item, index) in labelList" :key="index">{{
          item.label
        }}</view>
      </view>
    </view>
    <view class="radio-group">
      <up-radio-group v-model="radiovalue1" placement="column">
        <up-radio
          :customStyle="{ marginBottom: '8px' }"
          v-for="(item, index) in radiolist"
          :key="index"
          :label="item.label"
          :name="item.value"
          @change="radioChange"
        >
        </up-radio>
      </up-radio-group>
    </view>
  </view>
  <view class="tabbar">
    <view class="tabbar-button">
      <view class="upbutton">
        <up-button
          type="primary"
          :color="tabbarIndex == 1 ? '#1677ff' : '#f5f5f5'"
          :customStyle="{
            color: tabbarIndex == 1 ? '#ffffff' : '#666666',
          }"
          text="保存草稿"
          @click="tabbarChange(1)"
        ></up-button>
      </view>
      <view class="upbutton">
        <up-button
          type="primary"
          :color="tabbarIndex == 2 ? '#1677ff' : '#f5f5f5'"
          :customStyle="{
            color: tabbarIndex == 2 ? '#ffffff' : '#666666',
          }"
          text="预览"
          @click="tabbarChange(2)"
        ></up-button>
      </view>
      <view class="upbutton">
        <up-button
          type="primary"
          :color="tabbarIndex == 3 ? '#1677ff' : '#f5f5f5'"
          :customStyle="{
            color: tabbarIndex == 3 ? '#ffffff' : '#666666',
          }"
          text="发布(50积分)"
          @click="tabbarChange(3)"
        ></up-button>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
const dataInfo = ref<any>({});
const tabbarIndex = ref<any>(3);
const tabbarChange = (index: any) => {
  tabbarIndex.value = index;
};
const radiolist = ref<any>([
  {
    label: "公开（所有人可见）",
    value: 1,
  },
  {
    label: "仅飞手可见",
    value: 2,
  },
  {
    label: "仅自己可见",
    value: 3,
  },
]);
const radiovalue1 = ref<any>(1);
const status = ref<any>(true);
const labelList = ref<any>([
  {
    label: "公告",
    value: 1,
  },
  {
    label: "植保无人机",
    value: 2,
  },
  {
    label: "飞行技巧",
    value: 3,
  },
  {
    label: "飞行技巧",
    value: 3,
  },
  {
    label: "飞行技巧",
    value: 3,
  },
]);
const uploadList = ref<any>([]);
const textareaValue = ref<any>();
const afterRead = (file: any, lists: any, name: any) => {
  console.log("file", file);
  console.log("filistsle", lists);
  console.log("filistsle", name);
};
const radioChange = (n: any) => {
  console.log("radioChange", n);
};
</script>
<style lang="scss" scoped>
.post-thread {
  padding: 20px;
  height: 100vh;
  overflow: auto;
  margin-bottom: 100px;
  .post {
    display: flex;
    align-items: end;
    padding: 15px;
    background-color: #f1fbf4;
    border-radius: 4px;
    &.first {
      align-items: center !important;
      background-color: #eef6ff;
      margin: 10px 0;
      justify-content: space-between;
    }
    .post-right {
      display: flex;
      flex-direction: column;
      width: 100%;
      .text-icon {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text {
          font-size: 16px;
          font-weight: 700;
          color: #000000;
        }
      }
      .text {
        font-size: 14px;
        color: #666666;
        padding-top: 5px;
      }
    }
  }
  .upinput {
    display: flex;
    align-items: center;
    padding: 0 15px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    text {
      color: #999999;
    }
  }
}
.rich-content {
  border: 1px solid #e5e7eb;
  margin: 20px 0;
  border-radius: 6px;
  // .rich-text {
  //   border: 1px solid red;
  //   text {
  //     padding: 0 10px;
  //     font-size: 16px;
  //     font-weight: bold;
  //     color: #333333;
  //     &:nth-child(2) {
  //       font-style: italic;

  //     }
  //     &:last-child {
  //       text-decoration: underline;
  //       text-decoration-color: #333333;
  //     }
  //   }
  // }
}
.upload {
  .upload-icon {
    background-color: #eef6ff;
    color: #1677ff;
    font-size: 14px;
    border-radius: 6px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.hashtag {
  padding: 20px;
  border-radius: 6px;
  margin: 20px 0;
  background-color: #f9fafb;
  .label-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .label {
      display: flex;
      align-items: center;
      font-size: 16px;
      .icon-tags {
        transform: rotate(-90deg);
      }
    }
  }
  .label-list {
    display: flex;
    flex-wrap: wrap;
    margin: 5px -5px;
    .item {
      margin: 5px;
      border: 1px solid #e5e5e5;
      border-radius: 20px;
      padding: 5px 10px;
      background-color: white;
    }
  }
}
.radio-group {
  margin-bottom: 200px;
}
.tabbar {
  position: fixed;
  width: 100%;
  bottom: 0;
  background-color: #ffffff;
  .tabbar-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    margin: 0 -5px;
    .upbutton {
      width: 100%;
      margin: 0 5px;
      &:nth-child(1),
      &:nth-child(2) {
        width: 50%;
      }
    }
  }
}
</style>
